import React, {Component} from 'react';
import { View, StyleSheet, Text, Image, ViewPropTypes } from 'react-native';
import PropTypes from 'prop-types';

export default class ItemHeaderView extends Component{
    render(){
        return(
            <View style={[styles.container, this.props.style]}>
                <View style={[styles.blueLine, this.props.lineStyle]} />
                <Text style={[styles.title, this.props.titleStyle]}>{this.props.title}</Text>
                <Text style={[styles.subTitle, this.props.subTitleStyle]}>{this.props.subTitle}</Text>
                {
                    this.props.imageSource && <Image style={[styles.arrow, this.props.imageStyle]} resizeMode='contain' source={this.props.imageSource} />
                }
                {
                    this.props.updateText && <Text onPress={() => {
                        this.props.onUpdatePress && this.props.onUpdatePress()
                    }} style={[styles.updateText, this.props.updateStyle]}>{this.props.updateText}</Text>
                }
                {
                    this.props.showArrow && <Image style={styles.arrow} resizeMode='contain' source={this.props.arrowImg ? this.props.arrowImg : require('./item_arrow_red.png')} />
                }
            </View>
        );
    }
}

ItemHeaderView.propTypes = {
    title:PropTypes.string.isRequired,//标题
    subTitle: PropTypes.string,//子标题
    updateText: PropTypes.string,//修改文字 标题
    showArrow:PropTypes.bool,//是否显示右边箭头
    arrowImg:PropTypes.number,//右边箭头图片
    style:ViewPropTypes.style,
    titleStyle:PropTypes.oneOfType([Text.propTypes.style, ViewPropTypes.style]),
    subTitleStyle: PropTypes.oneOfType([Text.propTypes.style, ViewPropTypes.style]),
    updateStyle: ViewPropTypes.style,
    imageStyle: ViewPropTypes.style,
	onUpdatePress:PropTypes.func,
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#ffffff',
        flexDirection: 'row',
        alignItems: 'center',
        height: 52,
    },
    blueLine: {
        width: 3,
        height: 14,
        marginLeft: 15,
        backgroundColor: '#E83C36'
    },
    title: {
        marginLeft: 5,
        fontSize: 16,
        fontWeight: 'bold',
        color: '#222222',
    },
    subTitle: {
        color:'#999999',
        fontSize: 12
    },
    updateText: {
        flex:1,
        fontSize: 15,
        color: '#E83C36',
        marginRight: 5,
        textAlign:'right'
    },
    arrow: {
        width: 10,
        height: 14,
        marginRight:15,
    }
});
